<template>
  <div class="about">
    <Header></Header>
    <div class="contenBox">
      <img class="contenBox-mpf" src="@/assets/mpf.png" alt="" />
      <h1>Sign in</h1>
      <div>Your Personal Details</div>
      <el-divider></el-divider>

      <div class="contenBox-from">
        <el-form ref="form" :model="form" label-width="300px" label-position="left" :rules="formRules">
          <el-form-item label="First Name" prop="first">
            <el-input v-model="form.first" :placeholder="inputPlace"></el-input>
          </el-form-item>
          <el-form-item label="Last Name" prop="last">
            <el-input v-model="form.last" :placeholder="inputPlace"></el-input>
          </el-form-item>
          <el-form-item label="Gender" prop="gender">
            <el-radio-group v-model="form.gender">
              <el-radio label="Male"></el-radio>
              <el-radio label="Female"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="Participation Method" prop="participation">
            <el-radio-group v-model="form.participation">
              <el-radio label="Offline"></el-radio>
              <el-radio label="Online"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="Passport Number" prop="passport">
            <el-input v-model="form.passport" :placeholder="inputPlace"></el-input>
          </el-form-item>
          <el-form-item label="Organization" prop="organization">
            <el-input v-model="form.organization" :placeholder="inputPlace"></el-input>
          </el-form-item>
          <el-form-item label="Position" prop="position">
            <el-input v-model="form.position" :placeholder="inputPlace"></el-input>
          </el-form-item>
          <el-form-item label="Nationality" prop="nationality">
            <el-input v-model="form.nationality" :placeholder="inputPlace"></el-input>
          </el-form-item>
          <el-form-item label="Email" prop="email">
            <el-input v-model="form.email" :placeholder="inputPlace"></el-input>
          </el-form-item>
          <el-form-item label="Phone Number" prop="phone">
            <el-input v-model="form.phone" :placeholder="inputPlace"></el-input>
          </el-form-item>
          <el-form-item label="Contact Person Of Organization" prop="contact">
            <el-radio-group v-model="form.contact">
              <el-radio label="Yes"></el-radio>
              <el-radio label="No"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <el-divider></el-divider>
      </div>
      <div class="contenBox-add">
        <el-button class="contenBox-add-btn" type="text" @click="addTexteare"
          ><i style="color: #8fc31f" class="el-icon-circle-plus-outline"></i> Add your companions</el-button
        >
        <!-- <el-form ref="form" :model="form" label-width="300px" label-position="left" :rules="formTexteareRules">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"> </el-input>
        </el-form> -->
      </div>
      <div class="contenBox-addConten" v-if="isadd">
        <el-collapse v-model="activemodol">
          <el-collapse-item :name="ele.name" class="deploy-setting" v-for="(ele, i) in activeNames" :key="i">
            <template slot="title">
              <div class="contenBox-addConten-title">{{ ele.title }}</div>
              <div class="title-item" v-for="(element, index) in ele.children" :key="index">{{ element.left }} <span style="color: red">*</span></div>
              <img class="contenBox-addConten-img" src="@/assets/person.png" alt="" />
            </template>
            <div class="contenBox-addConten-item" v-for="(item, index) in ele.formTexteareList" :key="index">
              {{ item.left }} <span style="color: red">*</span>
            </div>
          </el-collapse-item>
        </el-collapse>

        <!-- <div class="contenBox-addConten-title">Companion 1</div>
        <el-divider></el-divider>
        <div class="contenBox-addConten-item" v-for="(item, index) in formFirstList" :key="index">{{ item.left }} <span style="color: red">*</span></div>
        <i v-if="" class="el-icon-arrow-down"></i>
        <i class="el-icon-arrow-up"></i> -->
      </div>
      <div class="contenBox-subimt">
        <el-button class="contenBox-subimt-btn" round @click="submit">Submit</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import Header from '@/components/Header';
export default {
  data() {
    return {
      fromList: [
        {
          left: 'First Name',
          right: 'text'
        },
        {
          left: 'Last Name',
          right: 'text'
        },
        {
          left: 'Gender',
          right: 'Male'
        },
        {
          left: 'Participation Method',
          right: 'Offline'
        },
        {
          left: 'Passport Number',
          right: '+77 6688 9990'
        },
        {
          left: 'Organization',
          right: 'text'
        },
        {
          left: 'Position',
          right: 'text'
        },
        {
          left: 'Nationality',
          right: 'text'
        },
        {
          left: 'Email',
          right: 'text'
        },
        {
          left: 'Phone Number',
          right: '+77 6688 9990'
        },
        {
          left: 'Contact Person Of Organization',
          right: 'Yes'
        }
      ],
      inputPlace: 'Please Input',
      form: {
        first: '',
        last: '',
        gender: '',
        participation: '',
        passport: '',
        organization: '',
        position: '',
        nationality: '',
        email: '',
        phone: '',
        contact: ''
      },
      formRules: {
        first: [{ required: true, message: 'Please input your first name', trigger: 'blur' }],
        last: [{ required: true, message: 'Please input your last name', trigger: 'blur' }],
        passport: [{ required: true, message: 'Please input your passport number', trigger: 'blur' }],
        organization: [{ required: true, message: 'Please input your organization', trigger: 'blur' }],
        position: [{ required: true, message: 'Please input your position', trigger: 'blur' }],
        nationality: [{ required: true, message: 'Please input your nationality', trigger: 'blur' }],
        email: [{ required: true, message: 'Please input your email address', trigger: 'blur', type: 'email' }],
        phone: [{ required: true, message: 'Please input your phone number', trigger: 'blur', type: 'email' }],
        gender: [{ required: true, message: 'Please select your gender', trigger: 'change' }],
        participation: [{ required: true, message: 'Please select your participation method', trigger: 'change' }],
        contact: [{ required: true, message: 'Please select if you want to contact person of organization', trigger: 'change' }]
      },
      activemodol: [],
      activeNames: [],
      name: 0,
      isadd: false
    };
  },
  components: { Header },
  mounted() {},
  methods: {
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
        } else {
          return false;
        }
      });
    },
    addTexteare() {
      this.isadd = true;
      this.activeNames.push({
        name: this.name++,
        title: 'Companion' + this.name,
        children: [{ left: 'First Name' }, { left: 'Last Name' }],
        formTexteareList: [
          { left: 'Gender' },
          { left: 'Participation Method' },
          { left: 'Passport Number' },
          { left: 'Organization' },
          { left: 'Position' },
          { left: 'Nationality' },
          { left: 'Email' },
          { left: 'Phone Number' },
          { left: 'Contact Person Of Organization' }
        ]
      });
    }
  }
};
</script>
<style scoped lang="scss">
.el-divider--horizontal {
  margin: 15px 0;
}
.el-collapse-item__arrow {
  float: left;
  margin-left: 5px;
  margin-right: 15px;
}

.contenBox {
  width: 55%;
  margin: auto;
  margin-top: 50px;
  position: relative;
  padding-bottom: 30px;
  h1 {
    text-align: center;
  }
  &-mpf {
    position: absolute;
    right: 0;
    top: -18px;
    width: 190px;
  }

  &-add {
    width: 100%;
    height: 40px;
    &-btn {
      float: right;
      color: #000;
    }
  }
  &-addConten {
    border: 1px solid #dcdfe6;
    border-radius: 10px;
    padding: 20px;
    background: #fff;
    &-title {
      font-weight: bold;
      width: 100%;
      border-bottom: 1px solid #dcdfe6;
      padding-bottom: 10px;
      margin-bottom: 10px;
    }
    &-img {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 80px;
    }
    &-item {
      margin-bottom: 15px;
      // color: #606266;
    }
  }
  &-subimt {
    width: 100%;
    display: flex;
    margin-top: 20px;
    justify-content: flex-end;
    &-btn {
      background: #22ac38;
      color: #fff;
      width: 130px;
    }
  }
}
.el-collapse {
  border: 0;
}

:deep().el-collapse-item__header {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  line-height: 29px;
  border-bottom: none;
  height: 131px;
  position: relative;
  .title-item {
    margin-bottom: 10px;
  }
}
:deep().el-collapse-item__arrow {
  position: absolute;
  top: 10px;
  right: 0;
  // transform: translateY(-20px);
}
:deep().el-collapse-item__wrap {
  border-bottom: none;
}
:deep().el-collapse-item__content {
  padding-bottom: 10px;
}
</style>
  